<!DOCTYPE html>
<html lang="en">
{% load static %}
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>

    <link rel="stylesheet" type="text/css" href="{% static 'css/base.css' %}"/>

    <title>{% block title %}
        首页
    {% endblock %}</title>

    {% block mycss %}{% endblock %}
    {% block myjs %}{% endblock %}
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" style="width: 15%"></a>
    <a class="navbar-brand" href="">欢迎来到便利蜂商城！</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="{% url 'shop:welcome' %}">首页<span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="{% url 'shop:type_show' %}">分类</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">活动</a>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">搜索</button>
        </form> &nbsp;&nbsp;
        <ul class="navbar-nav mr-left">
            <!--{# {% if user %}#}-->
            {% if request.user.is_authenticated %}
                <li class="nav-item">
                    <div class="nav-link btn-group">
                        欢迎：<img id="icon" style="width:25px; height:25px; border-radius: 30px"
                                src="/static{{ MEDIA_URL }}{{ request.user.icon }}" alt=""> &nbsp;&nbsp;
                        <button type="button" class="btn  dropdown-toggle dropdown-toggle-split"
                                id="dropdownMenuReference" data-toggle="dropdown" aria-expanded="false"
                                data-reference="parent">
                            <span class="sr-only">Toggle Dropdown</span>
                        </button>
                        <div class="dropdown-menu" aria-labelledby="dropdownMenuReference">
                            <a class="dropdown-item" href="{% url 'shop:detail' %}">用户中心</a>
                            <a class="dropdown-item" href="{% url 'shop:show_my_cart' %}">我的购物车
                            </a>
                            <div class="dropdown-divider"></div>
                            <a class="small dropdown-item" href="{% url 'shop:user_logout' %}">退出登录</a>
                        </div>

                    </div>
                </li>
                {% block mycart %}
                <li class="nav-item">
                    <div class="nav-link btn-group" style="height:100%;">
                        <a href="{% url 'shop:show_my_cart' %}" >
                        <svg id="" xmlns="http://www.w3.org/2000/svg" style="float: left;color:green"  width="65" height="45" fill="currentColor"
                             class="bi bi-cart" viewBox="0 0 16 16">
                            <path d="M0 1.5A.5.5 0 0 1 .5 1H2a.5.5 0 0 1 .485.379L2.89 3H14.5a.5.5 0 0 1 .491.592l-1.5 8A.5.5 0 0 1 13 12H4a.5.5 0 0 1-.491-.408L2.01 3.607 1.61 2H.5a.5.5 0 0 1-.5-.5zM3.102 4l1.313 7h8.17l1.313-7H3.102zM5 12a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm7 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-7 1a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm7 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
                        </svg>
                        <p  style="float: left;font-size:3ch;color: red" id="my_cart_number">{{ count|default:'0' }} </p>
                        </a>
                    </div>
                </li>
                {% endblock %}
            {% else %}
                <li class="nav-item">
                    <a class="nav-link" href="/user_login/">登录</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/register/">注册</a>
                </li>
            {% endif %}
        </ul>
        <a class="navbar-brand" style="width: 20%"></a>
    </div>
</nav>
<!--主体-->
<div id="box">
    {% block content %}

    {% endblock %}

</div>

<!--底部-->
<div class="footer">
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <h5>关于我们</h5>
                <p>
                    便利蜂商城是一个专业的网上购物商城，主要销售各种日用品，包括家用电器、厨房用具、家庭清洁用品、家居百货、
                </p>
            </div>
            <div class="col-md-6">
                <h5>联系我们</h5>
                <p>
                    地址：广东省广州市白云区白云大道北
                </p>
                <p>
                    邮编：510660
                </p>
                <p>
                    电话：020-29366688
                </p>
                <p>
                    手机：13588765456
                </p>
            </div>
        </div>
    </div>
</div>

</body>
</html>